単純なグラフ

最も単純なグラフは、各データポイントに数値が１つだけ関連付けられているものです。典型的な例は、次のグラフのような、各地域の販売データを示すグラフです。

グラフを作成するには、まずグラフとして示されるデータを作成する必要があります。次に、必要なデータを作成するコードをいくつか示します。

注意： このコードには、グラフに特有の要素はありません。これは汎用のデータに過ぎません。次のトピックでもこのデータを使用して、時系列グラフおよびXYグラフを作成します。

C#	コードのコピー
// ダミーの販売データを保持する単純なクラス public class SalesRecord { // プロパティ public string Region { get; set; } public string Product { get; set; } public DateTime Date { get; set; } public double Revenue { get; set; } public double Expense { get; set; } public double Profit { get { return Revenue - Expense; } } // コンストラクタ１ public SalesRecord(string region, double revenue, double expense) { Region = region; Revenue = revenue; Expense = expense; } // コンストラクタ２ public SalesRecord(DateTime month, string product, double revenue, double expense) { Date = month; Product = product; Revenue = revenue; Expense = expense; } } // 地域ごとに１つの SalesRecord を含むリストを返す List GetSalesPerRegionData() { var data = new List(); Random rnd = new Random(0); foreach (string region in "北部,東部,西部,南部".Split(',')) { data.Add(new SalesRecord(region, 100 + rnd.Next(1500), rnd.Next(500))); } return data; } // 製品ごとに１つの SalesRecord を含むリストを返す、// 期間は 12 カ月 List GetSalesPerMonthData() { var data = new List(); Random rnd = new Random(0); string[] products = new string[] {"ウィジェット", "ガジェット", "スプロケット" }; for (int i = 0; i < 12; i++) { foreach (string product in products) { data.Add(new SalesRecord( DateTime.Today.AddMonths(i - 24), product, rnd.NextDouble() * 1000 * i, rnd.NextDouble() * 1000 * i)); } } return data; } }

コードのコピー

// ダミーの販売データを保持する単純なクラス
public class SalesRecord
{
  // プロパティ
  public string Region  { get; set; }
  public string Product { get; set; }
  public DateTime Date  { get; set; }
  public double Revenue { get; set; }
  public double Expense { get; set; }
  public double Profit  { get { return Revenue - Expense; } }
  // コンストラクタ１
  public SalesRecord(string region, double revenue, double expense)
  {
    Region = region;
    Revenue = revenue;
    Expense = expense;
  }
  // コンストラクタ２
  public SalesRecord(DateTime month, string product,    double revenue, double expense)
  {
    Date = month;
    Product = product;
    Revenue = revenue;
    Expense = expense;
  }
}
// 地域ごとに１つの SalesRecord を含むリストを返す
List GetSalesPerRegionData()
{
  var data = new List();
  Random rnd = new Random(0);
  foreach (string region in "北部,東部,西部,南部".Split(','))
  {
    data.Add(new SalesRecord(region, 100 + rnd.Next(1500), rnd.Next(500)));
  }
  return data;
}
// 製品ごとに１つの SalesRecord を含むリストを返す、// 期間は 12 カ月
List GetSalesPerMonthData()
 
{
  var data = new List();
  Random rnd = new Random(0);
  string[] products = new string[] {"ウィジェット", "ガジェット", "スプロケット" };
  for (int i = 0; i < 12; i++)
  {
    foreach (string product in products)
    {
      data.Add(new SalesRecord(
        DateTime.Today.AddMonths(i - 24),
        product,
        rnd.NextDouble() * 1000 * i,
        rnd.NextDouble() * 1000 * i));
      }
    }
    return data;
     }
}

SalesData クラスがパブリックであることに注意してください。これはデータバインディングのために必要です。グラフの作成では、以下の主な４段階の手順を実行します。

手順１:グラフタイプの選択このコードは、既存の系列をすべてクリアして、グラフタイプを設定します。

C#	コードのコピー
public Window1() { InitializeComponent(); // 現在のグラフをクリア c1Chart.Reset(true); // グラフタイプを設定 c1Chart.ChartType = ChartType.Bar; }

手順２:軸の設定

まず、両方の軸への参照を取得します。ほとんどのグラフでは、水平の軸（X）には各ポイントに関連付けられたラベルを表示し、垂直の軸（Y）には値を表示します。例外は、水平の棒を表示する横棒グラフのタイプです。このグラフタイプの場合、ラベルは Y 軸に表示され、X 軸には値が表示されます。

次に、タイトルを軸に割り当てます。軸のタイトルは単なるテキストではなく、UIElement オブジェクトです。これは、タイトルの書式を完全に制御できるということです。実は、軸のタイトルには、ボタン、テーブル、または画像を備えた複雑な要素を使用できます。この場合は、後で説明する CreateTextBlock メソッドで作成された単純な TextBlock 要素を使用します。

また、値の軸を設定してゼロで始まるようにし、桁区切り文字を使用して目盛記号の横に注釈が表示されるようにします。

C#	コードのコピー
// ラベルの軸を設定 labelAxis.Title = CreateTextBlock("地域", 14, FontWeights.Bold); // 値の軸を設定 _c1Chart.View.AxisX.Title = CreateTextBlock("金額 (万円)", 14, FontWeights.Bold); c1Chart.View.AxisX.AutoMin = false; c1Chart.View.AxisX.Min = 0; c1Chart.View.AxisX.MajorUnit = 200; c1Chart.View.AxisX.AnnoFormat = "#,##0 ";

コードのコピー

// ラベルの軸を設定
  labelAxis.Title = CreateTextBlock("地域", 14, FontWeights.Bold);
 
  // 値の軸を設定
_c1Chart.View.AxisX.Title = CreateTextBlock("金額 (万円)", 14, FontWeights.Bold);
  c1Chart.View.AxisX.AutoMin = false;
  c1Chart.View.AxisX.Min = 0;
  c1Chart.View.AxisX.MajorUnit = 200;
  c1Chart.View.AxisX.AnnoFormat = "#,##0 ";

手順３:つ以上のデータ系列の追加

ここでは、まず前に使用したメソッドを使用してデータを取得します。

C#	コードのコピー
// データを取得 var data = GetSalesPerRegionData();

次に、ラベルの軸に地域を表示します。これを行うには、各レコードの Region プロパティを取得する Linq ステートメントを使用します。結果は配列に変換され、ItemNames プロパティに割り当てられます。

C#	コードのコピー
// ラベルの軸に地域を表示 c1Chart.Data.ItemNames = (from r in data select r.Region).ToArray();

Linq の使用によって、コードがいかに直接的かつ簡潔になるかに注意してください。このサンプルデータには地域あたり１つのレコードしか含まれていないため、事情はさらに単純になっています。より現実的なシナリオでは、各地域に複数のレコードがあるため、より複雑な Linq ステートメントを使用して地域ごとにデータをグループ化します。

これで、グラフに追加される実際の DataSeries オブジェクトを作成する準備ができました。収益、支出、利益の３つの系列を作成します。

C#	コードのコピー
// 収益の系列を追加 var ds = new DataSeries(); ds.Label = "収益"; ds.ValuesSource = (from r in data select r.Revenue).ToArray(); c1Chart.Data.Children.Add(ds); // 支出の系列を追加 ds = new DataSeries(); ds.Label = "支出"; ds.ValuesSource = (from r in data select r.Expense).ToArray(); c1Chart.Data.Children.Add(ds); // 利益の系列を追加 ds = new DataSeries(); ds.Label = "利益"; ds.ValuesSource = (from r in data select r.Profit).ToArray(); c1Chart.Data.Children.Add(ds);

コードのコピー

// 収益の系列を追加
var ds = new DataSeries();
ds.Label = "収益";
ds.ValuesSource = (from r in data select r.Revenue).ToArray();
c1Chart.Data.Children.Add(ds);
// 支出の系列を追加
ds = new DataSeries();
ds.Label = "支出";
ds.ValuesSource = (from r in data select r.Expense).ToArray();
c1Chart.Data.Children.Add(ds);
// 利益の系列を追加
ds = new DataSeries();
ds.Label = "利益";
ds.ValuesSource = (from r in data select r.Profit).ToArray();
c1Chart.Data.Children.Add(ds);

コードでは、系列ごとに新しい DataSeries オブジェクトを作成して、その Label プロパティを設定しています。ラベルの設定は任意です。設定した場合は、このグラフに関連付けられたすべての C1ChartLegend オブジェクトに表示されます。次に、Linq ステートメントを使用して、データソースから値を取得します。その結果は、データ系列のオブジェクトの ValuesSource プロパティに割り当てられます。最後に、データソースはグラフのChildren コレクションに追加されます。

ここでも、Linq の使用によってコードがいかに簡潔かつ自然なものになるかに注意してください。

手順４:ラフの外観の調整

Theme プロパティを使用して、グラフの外観を手早く設定します。

WPF
Silverlight

C#	コードのコピー
// テーマを設定 c1Chart.Theme = _c1Chart.TryFindResource(new ComponentResourceKey(typeof(C1.WPF.C1Chart.C1Chart),"Office2007Black")) as ResourceDictionary;}

C#	コードのコピー
// テーマを設定します c1Chart.Theme = c1Chart.TryFindResource(new ComponentResourceKey(typeof(C1.Silverlight.C1Chart.C1Chart),"Office2007Black")) as ResourceDictionary;} }

軸を設定するときに CreateTextBlock ヘルパーメソッドを使用したことを思い出してください。このメソッドの定義は次のとおりです。

C#	コードのコピー
TextBlock CreateTextBlock(string text, double fontSize, FontWeight fontWeight) { var tb = new TextBlock(); tb.Text = text; tb.FontSize = fontSize; tb.FontWeight = fontWeight; return tb; }

これで、単純な値のグラフを生成するコードは終わりです。このコードは、ChartType プロパティの値を他の任意の単純なグラフタイプの値（Bar、AreaStacked、Pie）に変更して別タイプのグラフを作成することによってテストできます。ChartType を Column に変更する場合は、Y 軸にラベルを表示する必要があるため、AxisY を使用することに注意してください。結果は、以下の図のようになるはずです。

ChartType.Column

ChartType.Bar

ChartType.AreaStacked

ChartType.Pie

<c1chart:C1ChartLegend DockPanel.Dock="Right" />

注意： デフォルトでは、系列を説明する凡例がグラフに表示されます。C1ChartLegend を削除するには、次の XAML コードを削除します。

手順１:グラフタイプの選択 このコードは、既存の系列をすべてクリアして、グラフタイプを設定します。

手順２:軸の設定

手順３:つ以上のデータ系列の追加

手順４:ラフの外観の調整

手順１:グラフタイプの選択このコードは、既存の系列をすべてクリアして、グラフタイプを設定します。